import { styled } from '@mui/material/styles'
import Toolbar from '@mui/material/Toolbar'
import { LogoIcon } from '../../../assets/svg'
import ProfileButton from './components/profileButton'
import { Link } from 'react-router-dom'

import FavoritesButton from './components/favoritesButton'
import Search from './components/search'
import CartButton from './components/cartButton'
import { useAppSelector } from '../../../hooks'
import { selectAccessToken } from '../../../store/reducers/selectors'
import { Stack } from '@mui/material'

const StyledToolBarWrapper = styled(Toolbar)(() => ({
	display: 'flex',
	width: '100%',
	justifyContent: 'center',
	gap: '40px',
	backgroundColor: '#FFE44D',
}))

const StyledToolBar = styled(Toolbar)(() => ({
	display: 'flex',
	minWidth: '1200px',
	width: 'auto',
	flexDirection: 'row',
	justifyContent: 'space-between',
	gap: '40px',
	backgroundColor: '#FFE44D',
}))

export const Header = () => {
	const accessToken = useAppSelector(selectAccessToken)

	return (
		<StyledToolBarWrapper>
			<StyledToolBar>
				<Link to='..'>
					<LogoIcon />
				</Link>
				<Search />
				<Stack direction={'row'} spacing={5}>
					{accessToken && <FavoritesButton />}
					{accessToken && <CartButton />}
					<ProfileButton />
				</Stack>
			</StyledToolBar>
		</StyledToolBarWrapper>
	)
}
